<template>
    <swiper :options="swiperOption">
        <swiper-slide v-for="item in 10">
            <history-gallery-item :index="item"/>
        </swiper-slide>
        <div class="gallery-left-btn" slot="button-prev"><i class="el-icon-arrow-left"/></div>
        <div class="gallery-right-btn" slot="button-next"><i class="el-icon-arrow-right"/></div>
    </swiper>
</template>

<script>
    import HistoryGalleryItem from "@/pages/history/gallery/HistoryGalleryItem";
    export default {
        name: "HistoryGallery",
        components: {HistoryGalleryItem},
        data() {
            return {
                swiperOption: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                    slidesPerGroup: 3,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    navigation: {
                        nextEl: '.gallery-right-btn',
                        prevEl: '.gallery-left-btn'
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .gallery-left-btn, .gallery-right-btn {
        position: absolute;
        top: 10px;
        font: {
            size: 30px;
            weight: bolder;
        };
        z-index: 100;
        color: white;
        cursor: pointer;
    }

    .gallery-left-btn {
        left: 5px;
    }

    .gallery-right-btn {
        right: 5px;
    }
</style>
